<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!--  <meta name="viewport" content="width=device-width, initial-scale = 1.0"/>-->
    <title>Web</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script src="js/echarts.min.js"></script>
</head>

<body>
<h1>WebView Demo</h1>
<section class="contents">
    <aside class="aside aside-show">
        <menu class="menu">
            <MenuItem name="home" class="actived">
                <img src="./assets/home-outline.svg"></img>
                <span>Home</span>
            </MenuItem>
            <MenuItem name="entries">
                <img src="./assets/list-outline.svg"></img>
                <span>Entries</span>
            </MenuItem>
            <MenuItem name="set">
                <img src="./assets/settings-2-outline.svg"></img>
                <span>Set</span>
            </MenuItem>
        </menu>
        <div class="toolbar" title="隐藏">
            <i class="icon left"></i>
            <i class="icon right hidden"></i>
        </div>
    </aside>
    <main class="main">
        <div class="home-main">
            <div id="barchart_1"></div>
            <div id="barchart_2"></div>
            <div id="barchart_3"></div>
        </div>
        <div class="entries-main hide">
            <table class="table" border>
                <thead>
                <tr>
                    <th>
                        <div>日期</div>
                    </th>
                    <th>
                        <div>姓名</div>
                    </th>
                    <th>
                        <div>省份</div>
                    </th>
                    <th>
                        <div>市区</div>
                    </th>
                    <th>
                        <div>地址</div>
                    </th>
                    <th>
                        <div>邮编</div>
                    </th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div class="set-main hide">
            <div id="demo_controls">
                <fieldset id="fx">
                    <legend>Effects</legend>
                    <div class="tight">
                        <input value="Shadow" data-fx="shadow" type="button" class="fx" />
                    </div>
                    <div class="tight">
                        <input value="Mirror" data-fx="mirror" type="button" class="fx" />
                    </div>
                    <div class="tight">
                        <input value="Resize" data-fx="resize" type="button" class="fx align-top" />
                    </div>
                    <div class="tight speical">
                        <input value="Spin" data-fx="spin" type="button" class="fx" />
                        <input type="range" value="0" min="-180" max="180" list="markers" id="rotation" />
                        <datalist id="markers">
                            <option value="-180"></option>
                            <option value="-135"></option>
                            <option value="-45"></option>
                            <option value="0"></option>
                            <option value="45"></option>
                            <option value="135"></option>
                            <option value="180"></option>
                        </datalist>
                    </div>
                    <div class="tight">
                        <input value="Device" data-fx="handheld" type="button" class="fx" />
                    </div>
                </fieldset>
                <fieldset id="interop">
                    <legend>JS Interop</legend>
                    <div class="interop">
                        <label for="screen-selector">
                            Screen
                        </label>
                        <select name="screen-select" id="screen-selector" class="screen">
                            <option value="counter">Counter</option>
                            <option value="textField">TextField</option>
                            <option value="custom">Custom</option>
                        </select>
                    </div>
                    <div class="interop">
                        <label for="value">
                            Value
                        </label>
                        <input id="value" value="" type="text" readonly />
                        <input id="increment" value="Increment" type="button" />
                    </div>
                </fieldset>
            </div>
            <div class="set-main_content">
                <div id="set_target">
                    <div id="counter" class="set_target--content">
                        <title>Counter</title>
                        <article>
                            <div class="counter--content">
                                <span>按钮点击次数：</span>
                                <p id="countBtn">0</p>
                            </div>
                            <button id="counter_increment">+</button>
                        </article>
                    </div>
                    <div id="textField" class="set_target--content hide">
                        <title>Note to Self</title>
                        <article>
                            <div class="textField--content">
                                <textarea rows="1" class="my-text-area" maxlength="1000"></textarea>
                            </div>
                        </article>
                    </div>
                    <div id="custom" class="set_target--content hide">
                        <title>Count as Input</title>
                        <article>
                            <div class="custom--content">
                                <div class="top--show">
                                    <p style="position: absolute;left: 0;top: 0;">您输入了：</p>
                                    <p class="top--show--p">
                                        <strong id="customerInput"></strong>
                                        <span>个字符</span>
                                    </p>
                                </div>
                                <div class="bottom--input">
                                    <input value="" oninput="customerOnInput(value)" maxlength="1000">
                                    <img src="./assets/refresh-outline.svg" onclick="resetCustomerInput(event)"></img>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>

            <div class="settings">
                <div class="settings-item">
                    <div class="settings-item-sys">
                        系统设置
                    </div>
                </div>
                <div class="settings-item">
                    <div class="settings-item-sys">
                        账户设置
                    </div>
                </div>
                <div class="settings-item">
                    <div class="settings-item-sys">
                        声音设置
                    </div>
                </div>
                <div class="settings-item">
                    <div class="settings-item-sys">
                        更多设置
                    </div>
                </div>
            </div>
        </div>
        </div>
    </main>
</section>
<script type="text/javascript"></script>
<script src="js/home.js" defer></script>
<script src="js/aside.js" defer></script>
<script src="js/entries.js" defer></script>
<script src="js/control.js" defer></script>
<script src="js/interop.js" defer></script>

<script >
    function open(scalable, initScale, minimScale, maximScale) {
      let script = document.createElement('meta');
      script.name = 'viewport';
      script.content = `width=device-width, initial-scale = ${initScale}, minimum-scale = ${minimScale}, maximum-scale = ${maximScale}, user-scalable = ${scalable}`;
      document.getElementsByTagName('head')[0].appendChild(script);
      return `set viewPort ${script.content}`;
    }
</script>
</body>

</html>